<template>
	<view>
		<nav-custom/>
		<view class="flex justify-around padding">
			<view 
				v-for="(item,index) in tabArr" 
				:key="item.bcid"
				:class="{'text-gray':index!=tabIdx}"
				@click="handleTab(index)"
			>
				{{item.title}}
			</view>
		</view>
		<view class="goods-list flex flex-wrap justify-between">
			<goods-item 
				v-for="item in cakeList" 
				:gdata="item" 
				:key="item.objectId"
			/>
		</view>
		<cart-pop></cart-pop>
	</view>
</template>

<script>
	import { cakeGet } from '../../api/cake.js'
	import {ID,KEY,BASE} from '../../config/index.js'
	export default {
		data() {
			return {
				cakeList:[],
				page:0,
				tabArr:[
					{title:'蛋糕',bcid:1},
					{title:'面包',bcid:11},
					{title:'小食',bcid:6},
					{title:'配件',bcid:5},
				],
				tabIdx:0
			}
		},
		onLoad() {
			this.fetchData()
		},
		onReachBottom() {
			console.log('触底了');
			this.fetchData()
		},
		onPullDownRefresh() {
			this.cakeList = []
			this.page = 0
			this.fetchData()
		},
		methods: {
			handleTab(idx){
				this.tabIdx = idx
				this.page = 0
				this.cakeList = []
				this.fetchData()
			},
			fetchData(){
				let {tabArr,tabIdx} = this
				let {bcid} = tabArr[tabIdx]
				cakeGet(this.page,bcid).then(res=>{
					let {results} = res.data
					uni.stopPullDownRefresh() //关闭下拉刷新动画
					if(results.length){
						this.cakeList = [
							...this.cakeList,
							...results
						]
						this.page++
						return
					}
					uni.showToast({
						title:'没有更多了',
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.goods-list{
	padding: 16upx;
}
</style>
